<template>
  <q-page padding>
    <div>
      <q-table
        title="表格功能"
        flat
        bordered
        selection="multiple"
        :row-key="(row) => row.name"
        v-model:selected="multipleSelection"
        :selected-rows-label="getSelectedString"
        :columns="refColumns"
        :rows="refRows"
        :dense="$q.screen.lt.md"
        :visibleColumns="visibleColumns"
        :filter="filter"
        :loading="loading"
        color="primary"
      >
        <!-- 头部 -->
        <template v-slot:top="props">
          <div class="text-bold">表格功能</div>
          <q-space />
          <q-input
            dense
            v-select-all-text
            v-model="filter"
            placeholder="筛选值"
            class="q-mr-md w-150px"
          >
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>
          <q-select
            v-model="visibleColumns"
            multiple
            borderless
            dense
            options-dense
            display-value="筛选列"
            emit-value
            map-options
            :options="columns"
            option-value="name"
          />

          <q-btn
            flat
            round
            dense
            :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
            @click="props.toggleFullscreen"
          />
          <q-btn flat round dense icon="archive" @click="handelExportTable" />
        </template>
        <!-- 加载状态 -->
        <!-- <template v-slot:loading>
          <q-inner-loading showing color="primary" />
        </template> -->
      </q-table>
    </div>
    <!-- <div class="q-mt-md">单选择项： {{ JSON.stringify(singleSelected) }}</div> -->
    <div class="q-mt-md">多选择项： {{ JSON.stringify(multipleSelection) }}</div>
  </q-page>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useQuasar, type QTableColumn } from 'quasar'
import { useTable } from 'src/hooks/useTable'

const refColumns = ref<QTableColumn[]>([])
const refRows = ref<TableRow[]>([])
defineOptions({
  name: 'DemoPage',
})

interface TableRow {
  name: string
  addr: string
  iphone: string
  state: boolean
}

const $q = useQuasar()

const columns: QTableColumn[] = [
  {
    name: 'name',
    label: '名称',
    field: 'name',
    align: 'center',
    sortable: true,
    classes: 'rowbg',
  },
  {
    name: 'addr',
    label: '地址（城市）',
    field: 'addr',
    align: 'center',
    sortable: true,
    style: 'width: 50px',
  },
  {
    name: 'iphone',
    label: '电话',
    field: 'iphone',
    align: 'center',
    sortable: true,
  },
  {
    name: 'state',
    label: '状态',
    field: 'state',
    align: 'center',
    sortable: false,
  },
]

const rows: TableRow[] = [
  {
    name: 'aeerae001',
    addr: '贵阳市',
    iphone: '华为',
    state: false,
  },
  {
    name: 'aeerae002',
    addr: '赣州市',
    iphone: '小米',
    state: false,
  },
  {
    name: 'aeerae003',
    addr: '重庆市',
    iphone: '三星',
    state: true,
  },
  {
    name: 'aeerae004',
    addr: '贵阳市1',
    iphone: '华为',
    state: false,
  },
  {
    name: 'aeerae005',
    addr: '赣州市1',
    iphone: '小米',
    state: false,
  },
  {
    name: 'aeerae006',
    addr: '重庆市1',
    iphone: '三星',
    state: true,
  },
]

// 单选数据
// const singleSelected = ref([])

// 多选数据
const multipleSelection = ref([])

// 显示选中详情
const getSelectedString = () =>
  multipleSelection.value.length === 0
    ? ''
    : `选择了${multipleSelection.value.length} 记录，共 ${rows.length}条`

// 显示列
const visibleColumns = ref<string[]>([])

// 加载状态
const loading = ref(false)

// 筛选
const filter = ref('')

const { handelExportTable } = useTable(rows, columns)

onMounted(() => {
  loading.value = true
  // 模拟接口
  setTimeout(() => {
    refColumns.value = columns
    refRows.value = rows
    visibleColumns.value = columns.map((col) => col.name)
    loading.value = false
  }, 2000)
})
</script>

<style lang="scss"></style>
